وضعیت خالی:

وقتی کاربر شروع به کار با اپلیکیشن شما می کند و هنوز هیچ اطلاعاتی به آن وارد نکرده، یعنی درست بعد از ثبت نام، برای نخستین بار با اپلیکیشن شما مواجه می شود. فراموش نکنید این نخستین ارتباط کاربر با اپلیکیشن شما است و بسیار مهم است که در نخستین برخورد تاثیر خوبی بر روی کاربر بگذارید و او تجربه مناسبی از کار کردن با اپلیکیشن شما پیدا کند. 

این وضعیت اهمیت زیادی برای ابقای کاربران دارد. به خاطر اینکه کاربر جدید شما هنوز وابستگی به اپلیکیشن پیدا نکرده و اگر در گام اول تجربه خوبی نداشته باشد به احتمال زیاد با محصول شما خداحافظی می کند. 

یک روش خوب برای حل مشکل «وضعیت خالی» این است که با کمی اطلاعات به کاربر نشان دهیم که چطور از رابط کاربر شما استفاده کند. برای مثال با یک ویدیو یا یک تور محصول شامل چند اسکرین شات. در تصویر زیر شما بعد از ثبت نام در سایت Fitbit با صفحه ای مواجه می شوید که بخش های مختلف اپلیکیشن را نشان تان می دهد.

در کنار آن می توانید یک سری نکته و ترفند به کاربر نشان دهید. مثلا سایت Freshbooks به شما می گوید که هنوز هیچ تخمینی وارد نشده و لینکی برای ایجاد آنها به شما نشان می دهد.

برای وب اپلیکیشن زیر بعد از ورود، شما کادرهایی را می بینید که دارای شماره هستند و به شما می گویند تا وقتی شماره اول را تکمیل نکنید نمی توانید وارد شماره بعدی بشوید. به این ترتیب کاربر می فهمد که به چه ترتیبی باید عمل کند و مراحل را قدم به قدم طی می کند.

یک مثال دیگر سایت Basecamp است که بعد از ورود به سایت، یک ویدیو به کاربر نشان می دهد که اپلیکیشن آنها چطور کار می کند.

دارپ باکس یک روش جالب دارد. آنها یک برگه شروع درست کرده اند که لیستی از کارهایی که باید انجام بدهید را نشان می دهد تا حداکثر بهره وری را از دراپ باکس داشته باشید.

همانطور که کارها را انجام می دهید، دراپ باکس روی آنها خط می کشد و با رنگ سبز تکمیل شدن آنها را نشان می دهد.

در سمت چپ می بینید دارپ باکس با دادن جایزه به کاربر او را تشویق می کند تا تشویق به تکمیل مراحل بشود و با این کار کاربران این اپلیکیشن به راحتی کار با آن را یاد میگیرند و از آن لذت می برند.

میزان مصرف (حجم - دیتا) و نمایش اطلاعات

اگر در اپلیکیشن شما محدودیت برای چیزهایی مانند میزان فضای مورد مصرف یا تعداد پروژه ها و… وجود دارد. شما باید به صورت واضح و دقیق به کاربر تان نشان بدهید که چقدر از مصرف اش باقی مانده است تا به آنها اجازه بدهد قبل از برخورد با مشکل به شما اطلاع داده و جهت ارتقا اقدام نمایند. 

هیچ چیز بدتر از این نیست که ناگهان پیامی ظاهر شود و به کاربر بگوید که فضای ذخیره سازی آنها تمام شده و برای ادامه کار نیاز به ارتقا است. تصور کنید که مشتری شما در حال کار روی یک پروژه با زمان بندی محدود است و ناگهان اپلیکیشن شما جلوی کار او را می گیرد. در این حالت احتمالا باید با مشتری تان خداحافظی کنید. 

بیایید به چند مثال نگاه کنیم: در جیمیل یک متن در فوتر به شما همیشه نشان می دهد که چقدر از فضا را مصرف کرده اید و به مگابایت می گوید چقدر فضای باقی مانده وجود دارد.

دراپ باکس هم با یک نوار ساده میزان مصرف را به شما نشان می دهد.

در سایت Evernote نمایش این اطلاعات آنقدرها دم دست نیست و شما باید به صفحه تنظیمات مراجعه کنید تا آن را ببینید. این کار به خوبی اینکه آن را به صورت واضح به کاربر نشان بدهید نیست. یا اینکه حداقل یک لینک مستقیم از صفحه اصلی به اینجا ایجاد کنید.

این هم یک مثال دیگر که میزان فضای مصرف شده، تعداد مشتری ها و تعداد پروژه ها را با هم نمایش می دهد.

ارتقا / کاهش پلن

می خواهید به کاربران بگویید که می توانند پلن فعلی اکانت شان را ارتقا بدهند. چگونه این کار را انجام می دهید؟ آنها دلشان می خواهند اکانت شان را ارتقا بدهند اما دوست ندارند برای این کار از اپلیکیشن خارج شوند. این کار باید ساده و بدون مشکل انجام بشود. بنابراین تغییر پلن باید از طریق خود اپلیکیشن امکان پذیر باشد. 

بیایید مثال های این کار را با هم ببینیم: 

در سایت Freshbooks یک یادآورد آپگرید در فوتر اپلیکیشن به صورت دایمی وجود دارد. این يادآوری همیشه جلوی چشم شما است اما هیچ وقت مزاحم کار شما نیست. اما آنقدر واضح است که هر کسی را ترغیب به ارتقا و پرداخت پول بیشتر می کند!

در سایت BaseCamp صفحه آپگرید به صورت واضح و خوب نشان می دهد که در صورت ارتقا چه چیزهایی دریافت می کنید.

صفحه آپگرید دراپ باکس هم ساده و واضح است.

و این هم یک صفحه ارتقا پلن دیگر:

وضعیت اِلمان های رابط کاربری

در اپلیکیشن شما المان های متفاوتی وجود دارد. چیزهایی مانند دکمه ها، فرم ها و… هر کدام از آنها می تواند وضعیت های مختلفی داشته باشد. برای مثال در حالت نرمال، وقتی که موس روی آن قرار می گیرد(Hover)، ممکن است دکمه شما غیر فعال باشد و یا وضعیت focused و… اینها به کاربر نشان می دهد که چه کارهایی می تواند انجام بدهد و با نشانه های بصری او را راهنمایی می کند. 

این وضعیت ها بسیار مهم هستند و این حس را به کاربر منتقل می کنند که انگار در حال لمس اپلیکیشن شما است و در واقع حس زنده بودن را به اپلیکیشن القا می کنند. 

در آیتم هایی مانند منوهای ناویگیشن و دکمه ها هر کسی می داند که باید به این چیزها توجه کند. اما ممکن است بخواهید این توجه را در مورد بخش های مختلف اپلیکیشن تان ایجاد کنید. 

برای مثال در تصویر زیر می خواهیم توجه کاربر را به آن چهار کادر جلب کنیم. یک راه این است که در حالت Hover رنگ آن نوار بیرونی یا کل کادر را روشن تر کنیم.

وقتی هم موس از آنجا خارج می شود نور کم می شود.

این هم یک مثال دیگر از سایت Fitbit وقتی مصرف غذا را ثبت می کنید بخش غیر فعال در صفحه به صورت جمع شده نمایش داده می شود. اما دارای دستورهای شفافی است که به شما نشان می دهد چطور باید با آن کار کنید. وقتی روی لینک Add a note کلیک می کنید تبدیل به وضعیت فعال می شود که دارای یک text area است و داخل آن نیز نوشته (یک یادداشت بنویسید) که به خوبی از عهده مشکل «وضعیت خالی» بر می آید. (چیزی که در مورد اول صحبت اش را کردیم)

در وضعیت Hover در سایت بیسکمپ در بخش قیمت ها می بینیم که پلن مورد نظر برجسته می شود و یک tool tip با اطلاعات بیشتر ظاهر می گردد.

رابط کاربری را ساده و گیرا طراحی کنید

این چیزی است که طراحان رابط کاربری در موردش زیاد صحبت می کنند اما ایده ای است که یاد گرفتن اش آسان نیست. تا وقتی که خودتان سراغ طراحی رابط کاربری بروید. 

تصمیم گیری در مورد اینکه چه چیزی باقی بماند و چه چیزی را حذف کنیم کاری مشکل است. چطور تا حد ممکن همه چیز را ساده نگه داریم در حالی که می خواهیم امکانات قدرتمندی هم ارایه دهیم؟ چطور ۳۰ اکشن مختلف را در یک صفحه قرار بدهیم بدون اینکه طراحی ما شبیه داشبورد یک هواپیمای جت جنگنده بشود؟ 

چیزی که باید امتحان کنید «افشای تدریجی» اطلاعات است. اگر کاربر به یک دکمه، منو یا لینک احتیاج فوری ندارد می توانید آن را پنهان کنید. آن را از مسیر چشم کاربر بردارید و اجازه بدهید به جای انتخاب کردن از میان چندین انتخاب به راحتی کارشان را انجام بدهند. 

برای مثال در سایت دراپ باکس شما می توانید کارهای مختلفی روی فایل ها انجام بدهید اما این تصویر وضعیت غیر فعال لیست فایل ها است. ساده و بدون شلوغی.

کافی است که موس را روی یک فایل ببرید تا یک منو ظاهر شود و امکانات مختلفی را در اختیار شما قرار بدهد. این چیزی است که به آن «افشای تدریجی» می گوییم.

این ایده در ابتدا به نظر ساده می آید. اما در عمل می بینید که استفاده از آن کار ساده ای نیست. به خصوص اگر اپلیکیشن شما امکانات زیادی داشته باشد. 

مجبور هستید که خرده تصمیم های زیادی بگیرید و برای هر کدام از آنها تست انجام بدهید. کاربرها بعد از مدتی به یک وضعیت عادت می کنند و اگر بخواهید بعد از آن تغییر در اپلیکیشن انجام بدهید کاری ساده نیست و نیاز به تست و بررسی بیشتری دارد تا کاربران جریان کار خودشان را گم نکنند. 

تا اینجا با ۵ مورد اول آشنا شدیم. به نظر ساده می آیند اما نکات کاربردی و مهم زیادی در آنها نهفته است که سبب می شود بسیار ارزشمند باشند. منتظر قسمت دوم و ۵ مورد بعدی باشید و در کنار آن تجربیات خودتان را هم با دیگران به اشتراک بگذارید.

نظرات شما عزیزان:

نام :

آدرس ایمیل:

وب سایت/بلاگ :

متن پیام:

نظر خصوصی

 کد را وارد نمایید:

 

 

 

عکس شما

آپلود عکس دلخواه: